import styles from './Region.module.scss';
import AddCard from '../../AddCard/AddCard';
import CardTypes from '../../CardTypes/CardTypes';
import { useSelector } from 'react-redux';
import CardWeather from '../../CardWeather/CardWeather';

const Region = () => {
  const { weather, isLoading1 } = useSelector(({ regionTypes }) => regionTypes);
  return (
    <div className={styles.region}>
      <h1 className={styles.title}>Регион</h1>
      <div className={styles.wrapper}>
        <AddCard />
        {isLoading1 ? (
          weather.data.items.map((item) => (
            <CardWeather
              key={item.id}
              id={item.id}
              regionName={item.name}
              weatherCondition={item.weatherCondition}
              temperature={item.temperature}
              humidity={item.humidity}
              windSpeed={item.windSpeed}
              precipitationAmount={item.precipitationAmount}
              measurementDateTime={item.measurementDateTime}
              weatherForecast={item.weatherForecast}
            />
          ))
        ) : (
          <h1>Загурзка</h1>
        )}
      </div>
    </div>
  );
};

export default Region;
